<!-- 角色管理 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" :showBack="true"></pageHeaderNew>
    </template>
    <a-tabs
      default-active-key="2"
      v-model:active-key="queryType"
      @change="search"
    >
      <a-tab-pane :key="2" title="代理出去"> </a-tab-pane>
      <a-tab-pane :key="1" title="我代理的"> </a-tab-pane>
    </a-tabs>
    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="搜索"
            style="margin-bottom: 8px; max-width: 240px"
          />
        </a-space>
      </div>
      <div>
        <a-space>
          <a-button type="primary" @click="openModal">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增代理角色</template>
          </a-button>
        </a-space>
      </div>
    </div>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="60" title="序号" fixed="left" align="content">
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        dataIndex="roleName"
        title="代理角色名称"
        align="content"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        dataIndex="agentObjName"
        title="代理对象名称"
        align="content"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        dataIndex="objName"
        title="是否限时"
        align="content"
      >
        <template #cell="{ record }">
          <a-typography-text type="success" v-if="record.isLimitedTime === 1">
            是
          </a-typography-text>
          <a-typography-text disabled v-else> 否 </a-typography-text>
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        dataIndex="objName"
        title="失效时间"
        align="content"
      >
        <template #cell="{ record }">
          {{ dayjs(record.expiringDate).format('YYYY-MM-DD') || '无' }}
        </template>
      </a-table-column>
      <!-- <a-table-column
        :width="150"
        dataIndex="roleName"
        title="关联对象类型"
        align="content"
      >
        <template #cell="{ record }">{{
          setRelObjType.filter((ele) => ele.id === record.relObjType)[0].value
        }}</template>
      </a-table-column> -->

      <!-- <a-table-column :width="150" dataIndex="describe" title="最后活跃时间">
        <template #cell="{ record }">{{
          dayjs(record.updatedAt).format('YYYY-MM-DD')
        }}</template>
      </a-table-column> -->
      <a-table-column :width="150" title="操作">
        <template #cell="{ record }">
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="确认删除?" type="error" @ok="del(record.id)">
              <IconFont
                type="icon-delete"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
              />
            </a-popconfirm> </a-tooltip
          ><a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="edit(record)"
            /> </a-tooltip
        ></template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <AgentModel
    v-model:visible="modelVisible"
    v-if="modelVisible"
    @addAuthAgent="addAuthAgent"
    :editCompanyForm="editCompanyForm"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import {
  getAuthAgentList,
  postAuthAgent,
  delAuthAgent,
  putAuthAgent
} from '@/apis/roleManagement/index';
import AgentModel from './components/AgentModel.vue';

const editCompanyForm = ref({});
const queryType = ref(2);
const tableRef = ref();
const getTableData = async (page: any) => {
  try {
    const res = await getAuthAgentList({ ...page, queryType: queryType.value });
    console.log(res);
    return Promise.resolve(res);
  } catch (err: unknown) {
    console.log(err);
  }
};

const modelVisible = ref(false);

const openModal = () => {
  editCompanyForm.value = {};
  modelVisible.value = true;
};

const addAuthAgent = async (res: any, key: string) => {
  res.expiringDate = new Date(res.expiringDate).toJSON();
  if (key === 'add') await postAuthAgent({ ...res });
  else {
    delete res.roleName;
    delete res.agentObjName;
    delete res.agentObjId;
    await putAuthAgent({ ...res });
  }
  tableRef.value.loadData();
};

const search = () => {
  tableRef.value.loadData();
};
const title = '代理权限';

const del = async (roleId: number) => {
  try {
    await delAuthAgent({ roleId });
    tableRef.value.loadData();
  } catch (err: unknown) {
    console.log(err);
  }
};

const edit = (record: any) => {
  modelVisible.value = true;
  editCompanyForm.value = record;
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}
</style>
